<template>
  <div class="staff">
    <el-button @click="goBack">返回</el-button>
    <el-form ref="form" :data="form" :label-width="formLabelWidth">
      <el-form-item label="头像">
        <el-upload
          class="avatar-uploader"
          action="/api/file/upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="form.image_url" :src="form.image_url" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

      <el-form-item label="姓名">
        <el-input v-model="form.name" placeholder="请输入姓名" clearable/>
      </el-form-item>

      <el-form-item label="手机号">
        <el-input v-model="form.mobile" placeholder="请输入手机号" clearable/>
      </el-form-item>

      <el-form-item label="性别">
        <el-select v-model="value" :disabled="isEdit">
          <el-option v-for="gender in genders" :key="gender.value" :label="gender.label" :value="gender.value"/>
        </el-select>
      </el-form-item>

      <!-- <el-form-item label="入职时间">
        <el-date-picker v-model="form.create_time" type="date" placeholder="请选择开始时间" clearable/>
      </el-form-item>

      <el-form-item label="更新时间">
        <el-date-picker v-model="form.update_time" type="date" placeholder="请选择更新时间" clearable/>
      </el-form-item> -->

      <el-form-item label="备注">
        <el-input v-model="form.remark" style="width:300px;" type="textarea" rows="6" placeholder="备注" clearable/>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button>返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import staffApi from '@/api/staff'
const defaultForm = {
  name: '',
  phone: '',
  gender: null,
  remark: '',
  status: null,
  image_url: ''
}
export default {
  data() {
    return {
      formLabelWidth: 100 + 'px',
      form: Object.assign({}, defaultForm),
      genders: [
        {
          label: '男',
          value: '0'
        },
        {
          label: '女',
          value: '1'
        }
      ],
      value: '0'
    }
  },
  computed: {
    id() {
      return this.$route.params.id
    },
    isEdit() {
      return this.$route.meta.isEdit
    }
  },
  created() {
    if (this.isEdit) {
      this.getData()
    }
  },
  methods: {
    async getData() {
      const result = await staffApi.getStaffById(this.id)
      this.form = result.data[0]
      this.value = this.checkGender(result.data[0].gender)
    },
    async onSubmit() {
      if (this.isEdit) {
        await staffApi.updateStaff(this.form, this.id)
        this.$message.success('编辑成功')
      } else {
        this.form.gender = this.value
        await staffApi.addStaff(this.form)
        this.$message.success('添加成功')
      }
      this.goBack()
    },
    // 返回
    goBack() {
      this.$router.go(-1)
    },
    checkGender(val) {
      if (val === 0) {
        val = '男'
      } else {
        val = '女'
      }
      return val
    },
    handleAvatarSuccess(res, file) {
      console.log(res)
      this.form.image_url = res.filename;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return (isJPG) && isLt2M
    },
  }
}
</script>
<style lang="less" scoped>
  .staff {
    margin-top: 20px;
    .el-input {
      width: 300px;
    }
    .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
</style>
